<!--
 * @Description  : 我的订单
 * @Author       : MengFan Shan
 * @Date         : 2023-02-23
 * @LastEditors  : MengFan Shan
 * @LastEditTime : 2023-02-23
-->
<template>
  <AppPage headerTitle="选择签证地" class="bg-[#f8f8f8]" article-class="" header-class="bg-[#3d8ffd] ">
    <template #center><span class="c-white text-14">我的订单</span></template>
    <div class="bg-white px-15 order_nav">
      <nut-tabs v-model="selectedIndex" color="#3d8ffd" background="#fff" swipeable>
        <nut-tab-pane title="全部" pane-key="0">
        </nut-tab-pane>
        <nut-tab-pane title="待付款" pane-key="1">
        </nut-tab-pane>
        <nut-tab-pane title="办理中" pane-key="2">
        </nut-tab-pane>
        <nut-tab-pane title="已完成" pane-key="3">
        </nut-tab-pane>
        <nut-tab-pane title="退款/取消" pane-key="4">
        </nut-tab-pane>
      </nut-tabs>
    </div>
    <div class="px-15">
      <div class="my-10 px-20 bg-white" v-for="(item, i) in orderList" :key="i">
        <div class="flex justify-between py-10 b-b-1 b-b-solid b-b-[#f1f1f1]">
          <p class="c-[#333] font-bold text-13 pr-10 text-ellipsis--l1">
            {{ item.name }}
          </p>
          <span class="theme-color text-13 white-space">{{orderStatus(item.orderStatus)}}</span>
        </div>
        <div class="py-12  b-b-1 b-b-solid b-b-[#f1f1f1]">
          <div class="flex items-center pb-5">
            <p class="c-[#999]  text-13">
              <span>申请人：</span> {{ item.applicationMan }}
            </p>
          </div>
          <div class="flex items-center pb-5">
            <p class="c-[#999]  text-13">
              <span>出行日：</span> {{ item.travelTime }}
            </p>
          </div>
          <div class="flex items-center">
            <p class="c-[#999]  text-13">
              <span>订单号：</span> {{ item.orderNo }}
            </p>
          </div>
        </div>
        <div class="flex justify-between items-center py-10 b-b-1 b-b-solid b-b-[#f1f1f1]">
          <p class="c-[#999] font-bold text-13">
            {{ item.createTime }}
          </p>
          <div class="c-amber text-13 flex">
            <nut-button type="default" size="small" plain>订单详情</nut-button>
            <div class="ml5" v-if="item.orderStatus === 0">
              <nut-button type="primary" color="#3d8ffd" size="small">立即支付</nut-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <nut-empty description="无数据" v-if="!orderList.length"></nut-empty>
  </AppPage>
</template>

<script setup>
import { ref } from 'vue'
let selectedIndex = ref('0')
let orderList = ref([
  { name: '美国签证美国签证美国签证美国签证美国签证美国签证美国签证美国签证', orderStatus: 1, applicationMan: '钟*民', travelTime: '2023-12-12', orderNo: 4138374193874189327434832, createTime: '2023-10-12 12:12:12' },
  { name: '美国签证美国签证美国签证美国签证美国签证美国签证美国签证美国签证', orderStatus: 2, applicationMan: '钟*民', travelTime: '2023-12-12', orderNo: 4138374193874189327434832, createTime: '2023-10-12 12:12:12' },
  { name: '美国签证美国签证美国签证美国签证美国签证美国签证美国签证美国签证', orderStatus: 3, applicationMan: '钟*民', travelTime: '2023-12-12', orderNo: 4138374193874189327434832, createTime: '2023-10-12 12:12:12' },
  { name: '美国签证美国签证美国签证美国签证美国签证美国签证美国签证美国签证', orderStatus: 0, applicationMan: '钟*民', travelTime: '2023-12-12', orderNo: 4138374193874189327434832, createTime: '2023-10-12 12:12:12' }
])

const orderStatus = (key) => {
  switch (key) {
    case 0:
      return '待付款'
      break;
    case 1:
      return '待提交材料'
      break;
    case 2:
      return '已完成'
      break;
    case 3:
      return '退款/取消'
      break;
    default:
      return '暂无状态'
      break;
  }
}
</script>

<style lang="scss">
.order_nav .nut-tabs__content {
  display: none;
}
.order_nav .nut-tabs__titles-item.active {
  color: rgb(61, 143, 253);
}
.order {
  margin: 15px;
}
</style>
